<template>
  <view class="good-small" @click="handleFoodPreview">
  	  <view class="header">
		  <view class="title">{{title}}</view>
		  <view class="desc1">{{desc1}}</view>
	  </view>
  	  <view class="desc2">
  		  <view class="text">
  		  	<text>低至</text>
  		  	<text class="text">{{desc2}}</text>
  		  	<text>元起</text>
  		  </view>
  	  </view>
			  <view class="go">Go>></view>
  		  
  </view>
</template>

<script setup>
import { ref } from 'vue'
const {title,desc1,desc2} = defineProps({
	title:{
		type:String,
		default:'奶茶饮品'
	},
	desc1:{
		type:String,
		default:'惊爆价'
	},
	desc2:{
		type:String,
		default:'9.9'
	}
})


// 点击跳转到食物详情页
const handleFoodPreview = () => {
	uni.navigateTo({
		url: '/pages/foodPreview/foodPreview'
	})
}

</script>
<style scoped lang="scss">
	.good-small{
		background-color: white;
		width: 305rpx;
		height: 170rpx;
		border-radius: 30rpx;
		box-shadow: #dddddd 0 3rpx 20rpx;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		
		.header{
			display: flex;
			flex-direction: row;
			gap: 10%;
			// font-weight: 600;
			.title{
				font-size: 38rpx;
				font-weight: 600;
				margin-bottom: 10rpx;
			}
			.desc1{
				font-size: 30rpx;
				// font-weight: 500;
				font-weight: 600;
				line-height: 60rpx;
				
			}
		}
		
		.desc2{
			font-size: 30rpx;
				font-weight: 500;
				display: flex;
				justify-content: space-between;
				
			.text>.text{
				color: red;
				font-size: 32rpx;
				font-weight: 600;
			}
			
		}
			.go{
				border-radius: 100px;
				width: 120rpx;
				height: 45rpx;
				font-size: 30rpx;
				line-height: 45rpx;
				background-color: #FBD73D;
				color: white;
				border-color: #FBD73D;
				text-align: center;
				margin-top: 15rpx;
			}
			
		
		
	}
</style>
<style></style>